<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div class="panel">
    <!--Panel heading-->
    <div id="processBrief-heading" class="panel-heading bg-gray-light">
        <div class="panel-control">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#processBrief-tab-1" data-toggle="tab">基本信息</a></li>
                <li><a href="#processBrief-tab-2" data-toggle="tab">流程步骤</a></li>
            </ul>
        </div>
        <h3 class="panel-title">流程简要</h3>
    </div>

    <!--Panel body-->
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane fade in active" id="processBrief-tab-1">
                <form id="form_processBrief_input" class="form-horizontal">

                    <div class="form-group">
                        <label class="col-md-3 control-label">流程名称<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="name" id="name" th:value="${processBrief?.name}" class="form-control" placeholder="请输入流程名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">所属模块<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="module" id="module" th:value="${processBrief?.module}" class="form-control" placeholder="请输入所属模块">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-md-3 control-label">操作表<i class="fa fa-asterisk txt-color-red"></i></label>
                        <div class="col-md-7">
                            <input type="text" name="tableName" id="tableName" th:value="${processBrief?.tableName}" class="form-control" placeholder="请输入操作表">
                        </div>
                    </div>


                </form>
            </div>
            <div class="tab-pane fade" id="processBrief-tab-2">
                <div class="row">
                    <div class="col-sm-12 table-toolbar-left">
                        <button id="btn_add_processStep" class="btn btn-primary btn-sm" onclick="processStep_add()">新增流程</button>
                    </div>
                </div>
                <div class="jqGrid_wrapper">
                    <table id="processStep_table"></table>
                    <div id="processStep_page"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">

    var data = {
        id : [[${processBrief.id}]],
        path : [[${processBrief.path}]]
    };

    $(function(){
        // __layX_adapt_height(data.id);
        init_grid_processStep();
    });

    function fn_processBrief_save(callback){
        var data = {
            state : 1
        };
        callback(data);
    }

    function init_grid_processStep(){
        __init_jqgrid('processStep_table', null, '/flow/processStep/list?path='+data.path,
            ['名称', '步骤号', "下一步", '操作', 'id'],
            [
                {name: 'name', index: 'name', width: 100, sortable: false, searchoptions: {sopt: ['cn']}},
                {name: 'step', index: 'step', width: 100, sortable: false, searchoptions: {sopt: ['eq']}},
                {name: 'nextStep', index: 'nextStep', width: 100, sortable: false, searchoptions: {sopt: ['eq']}},
                {name: 'act', index: 'act', width: 60, sortable: false, search: false, formatter: actFormat},
                {name: 'id', index: 'id', width: 100, key: true, hidden: true}
            ],false, {
                autowidth : false,
                loadComplete : function(){
                    setTimeout(function(){
                        __jqGrid_width("processStep_table", $("#processBrief-heading").width()-40);
                    },300);
                }
            }
        );
    }

    function actFormat(cellvalue, options, rowObject) {
        var id = rowObject.id;
        cellvalue = '<button class="btn btn-default btn-xs" onclick="processStep_add(\'' + id + '\');"><i class="fa fa-pencil-square-o"> </i> 编辑</button> ';
        return cellvalue;
    }

    function processStep_add(keyId){
        __layX_html_save(data.id+"-input", "", "/flow/processStep/input?path="+data.path+"&keyId="+keyId, function(id, button, event){
            var callback = function(data){
                if(data && data.state === 1){
                    __layX_close(id);
                    __reflash_jqgrid("processStep_table");
                }
            };
            fn_processStep_save(callback);
        },{
            shadable : 0.6
        })
    }

</script>

</html>